<template>
	<div>
		<el-dialog :visible.sync="dialogFormVisible">
			<el-form :model="ruleForm2" status-icon :rules="rules2" ref="ruleForm2" label-width="100px" class="demo-ruleForm">
				<el-form-item label="所属课程" prop="courseId">
					<el-select v-model="ruleForm2.courseId" placeholder="请选择">
						<el-option v-for="item in courses" :key="item.courseId" :label="item.courseName" :value="item.courseId">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="考试时间" prop="examTime">
					<el-date-picker v-model="ruleForm2.examTime" type="date" placeholder="选择日期" value-format="yyyy/MM/dd">
					</el-date-picker>
				</el-form-item>
				<el-form-item label="发布时间" prop="examAddtime">
					<el-date-picker v-model="ruleForm2.examAddtime" type="date" placeholder="选择日期" value-format="yyyy/MM/dd">
					</el-date-picker>
				</el-form-item>
				<el-form-item label="考试地点" prop="examPlace">
					<el-input v-model.number="ruleForm2.examPlace"></el-input>
				</el-form-item>
				<el-form-item label="考试形式" prop="examForm">
					<el-input v-model.number="ruleForm2.examForm"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="submitForm()">发布</el-button>
					<el-button @click="dialogFormVisible=false">取消</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>

		<div class="publish" style="padding-right:1700px">
			<el-button type="primary" @click="dialogFormVisible = true">发布考试信息</el-button>
		</div>

		<div class="table">
			<el-table :data="tableData" style="width: 100%">
				<el-table-column type="selection" width="50">
				</el-table-column>
				<el-table-column prop="examTime" label="考试时间" width="200" :formatter="dateFormat">
				</el-table-column>
				<el-table-column prop="course.courseName" label="课程名称" width="120">
				</el-table-column>
				<el-table-column prop="examPlace" label="考试地点" width="120">
				</el-table-column>
				<el-table-column prop="examForm" label="考试形式" width="120">
				</el-table-column>
				<el-table-column prop="course.courseId" label="课程号" width="120">
				</el-table-column>
				<el-table-column prop="examAppointTime" label="预约时间" width="200" :formatter="dateFormat">
				</el-table-column>
				<el-table-column label="操作" width="220">
					<template slot-scope="scope">
						<el-button type="danger" icon="el-icon-delete" @click="open2(scope.row.examId)"></el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<!--分页-->
		<div class="block">
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageIndex" :page-size="pageSize" layout="total, prev, pager, next, jumper" :total="total">
			</el-pagination>
		</div>
	</div>
</template>

<script>
	import { examList, examInsert, examDelete } from '@/axios/api'
	import { formatDate } from '@/axios/date.js'
	export default {
		data() {
			var checkAge = (rule, value, callback) => {
				if(value === '') {
					return callback(new Error('考试时间不能为空'));
				} else {
					callback();
				}
			};
			var validatePass = (rule, value, callback) => {
				if(value === '') {
					callback(new Error('课程名称不能为空'));
				} else {
					callback();
				}
			};
			var validatePass2 = (rule, value, callback) => {
				if(value === '') {
					callback(new Error('考试地点不能为空'));
				} else {
					callback();
				}
			};
			var validatePass3 = (rule, value, callback) => {
				if(value === '') {
					callback(new Error('考试形式不能为空'));
				} else {
					callback();
				}
			};
			var validatePass4 = (rule, value, callback) => {
				if(value === '') {
					callback(new Error('课程号不能为空'));
				} else {
					callback();
				}
			};
			var validatePass5 = (rule, value, callback) => {
				if(value === '') {
					callback(new Error('预约时间不能为空'));
				} else {
					callback();
				}
			};
			return {
				pageIndex: 1,
				pageSize: 10,
				total: 0,

				dialogFormVisible: false,
				tableData: [],
				courses: [{
						courseId: 1,
						courseName: '化学2',
					},
					{
						courseId: 2,
						courseName: 'c语言1',
					},
					{
						courseId: 35,
						courseName: '英语1',
					},
					{
						courseId: 40,
						courseName: '环艺',
					},
				],
				ruleForm2: {
					
					courseId:1,
					teacherId:1,
					examPlace:'',
					examTime:'',
					examAppointTime:'2017/01/28',
					examForm:'',
					examAddtime:'',
					examMotifyPerson:'0',
					examMotifyDate:'2017/01/28',
					examDelete:1

				},
				rules2: {
					examTime: [{
						validator: checkAge,
						trigger: 'blur'
					}],

					courseName: [{
						validator: validatePass,
						trigger: 'blur'
					}],
					examPlace: [{
						validator: validatePass2,
						trigger: 'blur'
					}],
					examForm: [{
						validator: validatePass3,
						trigger: 'blur'
					}],
					courseId: [{
						validator: validatePass4,
						trigger: 'blur'
					}],
					examAppointTime: [{
						validator: validatePass5,
						trigger: 'blur'
					}]
				}
			}
		},
		methods: {
			/*日期格式化*/
				dateFormat(row, column) {
					var date = row[column.property];
					//console.log(date);
					return formatDate(new Date(date), 'yyyy-MM-dd');
				},
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
			},
			handleCurrentChange(val) {
				console.log(`当前页: ${val}`);
				let param = {
					pageIndex: val
				};
				examList(param).then(res => {
					this.tableData = res.resData.list;
					this.total = res.resData.total
				})
			},
			open2(examId) {
				console.log(examId);
				this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
					type: 'warning',
					center: true
				}).then(() => {
					let param = {
						id: examId
					};
					examDelete(param).then(res => {
						if(res.status == 200) {

							this.$message({
								message: res.message,
								type: 'success'
							});
							this.examList2();
						} else {
							this.$message({
								message: res.message,
								type: 'info'
							})
						};
					}).catch(() => {
						this.$message({
							type: 'info',
							message: '删除失败'
						});
					});
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '取消删除'
					});
				});

			},
			submitForm() {
				console.log(this.ruleForm2);
				examInsert(this.ruleForm2).then(res => {
					if(res.status == 200) {
						this.$message({
							message: res.message,
							type: 'success'
						});
						this.ruleForm2.examPlace='',
						this.ruleForm2.examTime='',
						this.ruleForm2.examForm='',
						this.ruleForm2.examAddtime='',
						this.dialogFormVisible=false,
						this.examList2();
					} else {
						this.$message({
							message: res.message,
							type: 'info'
						})
					};
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '取消添加'
					});
				});
			},

			/*显示考试列表*/
			examList2() {
				let param={pageIndex:this.pageIndex };
				examList(param).then(res => {
					this.tableData = res.resData.list;
					this.total = res.resData.total
				})
			}
		},
		mounted() {
			this.examList2();
			let user = localStorage.getItem('teacher-user');
			if(user) {
				user = JSON.parse(user);
				this.ruleForm2.teacherId=user.teacherId,
				console.log(this.teacherId)
				
			}
		}
	}
</script>